<!--
 * @Author: Wangtao
 * @Date: 2020-10-22 19:27:39
 * @LastEditors: Wangtao
 * @LastEditTime: 2021-01-27 13:54:00
-->
<template>
  <div class="canvas-operation-wrap">
    <breadcrumb
      :titleArr="titleArr"
      @back="breadcrumbBack"
      class="bread-crumb"
    ></breadcrumb>
    <div class="canvas-operation">
      <div class="canvas-operation-left">
        <div>
          <span>流程名称:</span
          ><el-input
            size="mini"
            placeholder="请输入名称"
            v-model="formData.name"
            ref="name-input"
          ></el-input>
        </div>
        <!-- <div>
          <span>服务号:</span>
          <m7Select
            size="mini"
            v-model="formData.numbers"
            :placeholder="'请选择服务号'"
            filterable
            :collapse-tags="true"
            :multiple="true"
            :options="serviceNumberList"
            :defaultProps="{ label: '_id', value: '_id' }"
          >
          </m7Select>
        </div> -->
      </div>
      <div class="canvas-operation-right">
        <div class="button-group" @click="scale('default')">
          <div class="oprate-btn">
            <i class="V7_iconfont V7_iconV7tubiao_dingweizhongxin"></i>
          </div>
        </div>
        <div class="button-group" @click="enlargeCanvas">
          <div class="oprate-btn">
            <i class="V7_iconfont V7_iconV7tubiao_quanping"></i>
          </div>
        </div>
        <div class="button-group button-oprate">
          <div class="oprate-btn" @click="scale('in')">
            <i class="V7_iconfont V7_iconV7tubiao_suoxiao"></i>
          </div>
          <div class="oprate-btn" @click="scale('out')">
            <i class="V7_iconfont V7_iconV7tubiao_xinzeng"></i>
          </div>
        </div>
        <div class="button-group">
          <el-button size="mini" type="primary" @click="ivrSave"
            >保存</el-button
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator'
import draggable from 'vuedraggable'
import breadcrumb from '@/components/breadcrumb/breadcrumb.vue'
import { IvrModule } from '@/store/modules/config/ivr'
import { ElMessage } from 'element-ui/types/message'
interface FormData {
  name: string,
  remark?: string
}
@Component({
  name: 'NodeMenu',
  components: { draggable, breadcrumb }
})
export default class NumberManage extends Vue {
  @Prop({ default: {} }) private data!: any
  private enlargeState = false
  private titleArr = ['流程管理', '编辑流程']
  private $message: ElMessage | undefined

  private mounted () {
    // this.getAvailableNumbers()
  }

  private formData: FormData = {
    name: ''
  }

  // private serviceNumberList: any = []

  private numberList: any = []
  private scale (type) {
    this.$emit('scale', type)
  }

  private breadcrumbBack () {
    this.$emit('pageBack')
  }

  private enlargeCanvas () {
    this.enlargeState = !this.enlargeState
    this.$emit('enlarge', this.enlargeState)
  }

  private ivrSave () {
    if (!this.formData.name) {
      (this.$message as any).error('流程名称必填！');
      (this.$refs as any)['name-input'].focus()
      return
    }
    this.$emit('save', this.formData)
  }

  @Watch('data', { immediate: true, deep: true })
  private dataChange (newData) {
    for (const k in this.formData) {
      if (k === 'numbers') {
        this.formData[k] = newData[k] || []
      } else {
        this.formData[k] = newData[k] || ''
      }
    }
  }
}
</script>

<style lang="stylus" scoped>
.canvas-operation-wrap
  position absolute
  top 0
  left 0
  width 100%
  z-index 100
.canvas-operation
  display flex
  justify-content space-between
  padding 24px
  .canvas-operation-right
    display flex
    align-items center
    .button-group
      display flex
      align-items center
      margin-left 10px
      .V7_iconV7tubiao_suoxiao
        font-size 14px
      .V7_iconV7tubiao_xinzeng
        font-size 14px
      .oprate-btn
        background white
        color #8D9DB0
        box-shadow 0px 2px 2px 0px rgba(190, 194, 196, 0.5)
        border-radius 3px
        width 28px
        height 28px
        cursor pointer
        text-align center
        display flex
        justify-content center
        align-items center
    .button-oprate
      div:nth-child(1)
        border-top-right-radius 0
        border-bottom-right-radius 0
      div:nth-child(2)
        border-top-left-radius 0
        border-bottom-left-radius 0
  .canvas-operation-left
    display flex
    align-items center
    > div
      display flex
      align-items center
      margin-right 10px
      span
        white-space nowrap
        margin-right 5px
        color #303753
      >>> .el-input__inner
        background white
        height 32px
        line-height 32px
        padding 0 8px
</style>
